<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>玩具冒险 - 肉鸽游戏</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <!-- 开始界面 -->
    <div id="start-screen" class="screen">
        <h1>玩具冒险</h1>
        <p>一个玩具的肉鸽冒险之旅</p>
        <button id="start-btn" class="btn">开始游戏</button>
        <button id="how-to-play-btn" class="btn secondary">游戏说明</button>
    </div>

    <!-- 游戏说明界面 -->
    <div id="instructions-screen" class="screen hidden">
        <h2>游戏说明</h2>
        <ul>
            <li><i class="fas fa-arrow-up"></i> <i class="fas fa-arrow-down"></i> <i class="fas fa-arrow-left"></i> <i class="fas fa-arrow-right"></i> 或 WASD 移动</li>
            <li><i class="fas fa-space-shuttle"></i> 空格键 普通攻击</li>
            <li><i class="fas fa-key"></i> 1-3 键 使用技能</li>
            <li><i class="fas fa-shield-alt"></i> 击败敌人获得经验和金币</li>
            <li><i class="fas fa-level-up-alt"></i> 升级可获得属性提升</li>
            <li><i class="fas fa-box-open"></i> 打开宝箱获得装备和道具</li>
        </ul>
        <button id="back-btn" class="btn">返回</button>
    </div>

    <!-- 游戏界面 -->
    <div id="game-screen" class="screen hidden">
        <!-- 游戏地图区域 -->
        <div id="game-map">
            <div id="player" class="entity player"></div>
            <div id="combat-text" class="combat-text"></div>
        </div>
        
        <!-- 游戏面板 -->
        <div class="game-hud">
            <!-- 玩家信息面板 -->
            <div class="player-hud">
                <div class="health-bar">
                    <div id="health-fill" class="health-fill"></div>
                    <span id="health-text">100/100</span>
                </div>
                <div class="mana-bar">
                    <div id="mana-fill" class="mana-fill"></div>
                    <span id="mana-text">50/50</span>
                </div>
                <div class="exp-bar">
                    <div id="exp-fill" class="exp-fill"></div>
                    <span id="exp-text">Lv.1 0/100</span>
                </div>
                <div class="player-stats">
                    <span><i class="fas fa-coins"></i> <span id="gold">0</span></span>
                    <span><i class="fas fa-skull"></i> <span id="kills">0</span></span>
                </div>
            </div>
            
            <!-- 技能面板 -->
            <div class="skills-panel">
                <div class="skill-slot">
                    <div class="skill-icon" id="skill-1">1</div>
                    <div class="skill-cooldown" id="cooldown-1"></div>
                </div>
                <div class="skill-slot">
                    <div class="skill-icon" id="skill-2">2</div>
                    <div class="skill-cooldown" id="cooldown-2"></div>
                </div>
                <div class="skill-slot">
                    <div class="skill-icon" id="skill-3">3</div>
                    <div class="skill-cooldown" id="cooldown-3"></div>
                </div>
            </div>
            
            <!-- 游戏控制按钮 -->
            <div class="game-controls">
                <button id="pause-btn" class="control-btn"><i class="fas fa-pause"></i></button>
            </div>
        </div>
        
        <!-- 升级选择面板 -->
        <div id="level-up-panel" class="panel hidden">
            <h3>选择升级</h3>
            <div class="upgrade-options">
                <div class="upgrade-option" data-type="health">
                    <h4>生命值提升</h4>
                    <p>最大生命值 +20</p>
                </div>
                <div class="upgrade-option" data-type="damage">
                    <h4>攻击力提升</h4>
                    <p>攻击力 +5</p>
                </div>
                <div class="upgrade-option" data-type="mana">
                    <h4>魔力提升</h4>
                    <p>最大魔力 +10</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 暂停界面 -->
    <div id="pause-screen" class="screen hidden">
        <h2>游戏暂停</h2>
        <button id="resume-btn" class="btn">继续游戏</button>
        <button id="restart-btn" class="btn secondary">重新开始</button>
        <button id="quit-btn" class="btn secondary">退出游戏</button>
    </div>

    <!-- 游戏结束界面 -->
    <div id="game-over-screen" class="screen hidden">
        <h2>游戏结束</h2>
        <p>你的得分: <span id="final-score">0</span></p>
        <p>击败敌人: <span id="final-kills">0</span></p>
        <p>最高波数: <span id="final-wave">0</span></p>
        <button id="play-again-btn" class="btn">再玩一次</button>
        <button id="main-menu-btn" class="btn secondary">主菜单</button>
    </div>

    <!-- uni-app webview 通信脚本 -->
    <script src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.4.js"></script>
    <script>
        // 接收来自 uni-app 的消息
        function receiveMessage(data) {
            console.log('收到来自 uni-app 的消息:', data);
            // 可以在这里处理来自 uni-app 的消息
        }

        // 向 uni-app 发送消息
        function sendToUniApp(data) {
            if (typeof uni !== 'undefined') {
                uni.postMessage({ data: data });
            }
        }

        // 游戏事件通知 uni-app
        function notifyGameEvent(event, data) {
            sendToUniApp({
                action: 'gameEvent',
                event: event,
                data: data
            });
        }
    </script>
    <script src="game.js"></script>
</body>
</html>
    